Wildform is the creator of the SWfX SWF text effects generator and the Flix SWF video encoder. This tutorial was written by to accompany and explain the attached .FLA, which was authored in Flash 4. last modified October 30, 2000 ©2000 Wildform, Inc.

<- back to tutorials
SWfX Help System .FLA
Table of Contents
	Introduction Basic Concepts Movie Clips GoTo Action Buttons Vectors Text Handling Masks SWfX Help System Constructs Loading Animation Wildform Brand Animation Scroll Bars Table of Contents Dialog Boxes Topics Simple Topics Complex Topics
Introduction
	I am open-sourcing this .fla for the Wildform SWfX (www.wildswfx.com) help system and writing this accompanying tutorial because of the interest generated by this movie on the HATT list on eGroups. Although I was not aware of this fact when I began development, apparently this help file is the first to be constructed entirely within Flash. I chose Flash for this project for a few specific reasons. SWfX is an SWF text effects engine, so Flash is central to its function and marketing. And, notably, the entire interface for SWfX is constructed in SWF. As a result of both these factors, we require the Flash player for our application - it is less than 200K and the license to distribute Flash is free from Macromedia. Additionally, when we port SWfX to additional platforms, we do not need to rewrite the help file - Flash is written for PC, Mac, Linux and Solaris and runs almost identically on each. In my experience, Flash really is "write once, publish everywhere" and that saves significant development and Q&A resources. When beginning to think about how to create a help system in Flash, it is important for traditional Windows help developers to realize that Flash is not a display protocol, with fixed functionality, such as WinHelp. Such protocols, while they simplify the production process, also limit the potential of the product - it is more or less impossible to create anything other than a standard Windows help system with WinHelp. You might find it helpful to think of Flash not as a display protocol, but rather as a powerful interface development platform - one can create customized interfaces, with a wide variety of graphics, animation, sound and behavior. This freedom allows developers the room not only to create distinct graphical designs, but also custom information-handling structures, such as menus, indices, tooltips, search functions, etc. Below I will explain most of the concepts that I used in constructing this help system. But, in essence, all I've done is apply Flash web-design techniques to the task of creating a help file. This is not an instruction manual on how to create help systems in Flash - rather this tutorial is just a brief overview of the concepts and mechanisms relevant to this project. I begin with a description of the basic concepts that I feel are important for understanding this help system, as well as the landscape of possibilities Flash has to offer. I then delve into specifics of this help system, explaining features from standard mechanisms such as loading animation and scroll bars, to the construction of entire topics such as the FAQ. The .fla itself should be relatively self-explanatory. The timeline is marked fairly clearly, and I tried to maintain consistency in naming of objects and movies. Throughout this tutorial, I assume that you are familiar with the basics of Macromedia Flash. That said, I have tried to be as clear as possible for as broad an audience as possible. Thank you!
Table of Contents
Basic Concepts
Movie Clips
	Although there are 3 main types of symbols, or behaviors, in Flash (graphics, buttons, and movie clips), the movie clip is by far the most powerful. A movie clip is an independent movie with an independent timeline (e.g., one movie clip can be paused, while others continue to play, while still others are currently invisible). Instances of movies may have names, which may be referenced by and receive instructions from other parts of your project. With the movie clip, it is possible to build reusable structures and mechanisms, which can then be placed into any movie, saving hours of otherwise redundant development time. For example, further below I describe how I constructed the FAQ. Although the FAQ movie is currently within the SWfX help system, I was able to copy that FAQ movie directly from the help system into the website, with very few minor modifications. The scroll bars, which I also describe below, are another good example. Just copy the scroll bar movie into any project you want, resize the scroll bar so that it fits the area (replace the graphics, if necessary) and change the values of 4 variables and it will work immediately! As you continue to develop in Flash, try to develop techniques that allow you to reuse as much code as possible, through creative use of movie clips.
Table of Contents
GoTo Action
	While many of the actions in Flash 4 are essential to the development of complex interfaces, the GoTo function, while incredibly simple, is invaluable. With it you can completely control every motion at every moment. For example, I use this feature in the loading animation (described in slightly greater detail below), to advance the movie to the proper frame when the movie is fully loaded. This is also the method I use to activate any topic or tooltip. If the target of the "GoTo" command is a separate movie clip, there are two ways to reference that movie: an absolute link and a relative link (e.g. '_level0/movie_num/top_tooltip' as opposed to '../top_tooltip', respectively). If you are planning to port your project to different shells (for instance, the FAQ from this help file was reused almost verbatim at http://www.wildswfx.com) then you might want to use relative linking from the start. Once you load a movie into a parent movie, all levels shift. I explain more about this below under "Using Multiple Movies Together at Runtime".
Table of Contents
Buttons
	If you're distressed because you have to build the functionality for each and every object that you want to use in Flash, then rejoice! Flash includes a "button" which has a normal, an over, and a down state. As well, each button has a hit state, which you may use to define the area for invisible buttons (this is better than setting a button to 0% alpha, because Flash still consumes processor power to render objects at 0% alpha, whereas it does not render invisible objects). What's more, you can set actions on these buttons on mouse-over, mouse-out, drag-over, drag-out, press, and release. Decide which actions are best for your purposes, and then keep them consistent to minimize user confusion. One very important feature of Flash to remember - one that is not used often, nor is it used here - is that you can tie key-strokes to actions. Create a button (it can be off the easel if you do not want it visible to the user) and then under "On Mouse Event", select "key press" and choose your keys. So, for example, you could make it such that if a user hits "?" the main table of contents appears comes up. The right mouse click is reserved by the Flash player to display a menu that you, the developer, can customize to a certain degree. You can not override this function, and neither can you add items to the menu, but you can limit which menu options appear. The SWfX application features scroll-wheel functionality (on the effect list) because we were able to build it into the container application. Flash itself, probably due to cross-platform considerations, can not recognize input from the scroll wheel.
Table of Contents
Vectors
	Although it can deliver many types of data, from images to sound, Flash was designed, and is still best at, rendering vectors (lines defined by points) as opposed to bitmaps (which map each bit in the image). By saving all shape information as vectors (instead of bitmaps) file size is drastically reduced. As well, you can manipulate shapes much more freely, because vectors render at full quality at many sizes and aspect ratios. You will notice that with one exception (the animation behind the Wildform text), all the contents of this help system are vectors (fonts, like shapes, are vectors).
Table of Contents
Text Handling
	You will notice that I used simple text fields, instead of edit text fields, for the content in this help project - thereby making this a static help system. If I had used edit text fields instead, I could have made the content updatable from a remote data source. However, the content was so thin that I felt there was no need to make a mechanism that complex. What's more, most of the pages in this help system are custom-designed to the amount of text included - if the text length were variable, this design would break. In Flash, you can layout rectangular text areas, which means that you can not get your text to wrap around an image (a la HTML), which limits you in certain ways, but this is a small price to pay for the other advantages of Flash. Also, remember: the Flash player is basically a vector rendering engine (see Vectors). This is great for animating simple objects. However, because of the number of lines and points in each character of text, animating blocks of text (even with a simple alpha fade) can slow down your player significantly (this also depends on the complexity of the font you are using). You will see some of that in here; because this was my first Flash project with this amount of text, I did not optimize my design for the medium. I would strongly suggest animating small bits of text at a time (a header or a title, for example) or forgoing animation on body text altogether. Another capability of Flash is the reuse of fonts. Once you've loaded a "glyph" (the actual letter shape), let's say Times New Roman lowercase "f", you can use it over and over again without adding to file size because Flash knows how to reuse fonts in this manner. An uppercase "F" is not the same shape as a lowercase "f" - your movie will need to store both. Be certain not to convert the text to shape, because Flash no longer thinks of that character as a font letter, but rather as a standard vector shape, and will not reuse it automatically. Also, Flash can not implement this feature cross-movie. That is, if you use Load Movie to load a new page, which also has the same "f", that character - just like any library symbol - must be stored once in each file. If you are loading your text dynamically, you need to tell Flash to store these font outlines because they are not actually in the SWF you are creating. You can do this by setting your edit text field properties. Right click on your text field, and select "properties". Under outlines, you will most likely not want to include all font outlines, because font outlines add to filesize and you will probably not need all symbols in a font. Select "include only specified font outlines" and manually enter each character you desire. Again, if you want both the lowercase and uppercase "f" in your movie, you need to enter both "f" and "F". Remember to include all punctuation and symbols. If you are working on a PC, you might find the Windows Character Map very helpful for this task. Select "Run" under the start menu, and type in "charmap". It will list all available glyphs for each font on your system.
Table of Contents
Masks
	Masks are a very simple and efficient way of controlling the visible portion of objects. Simply put what you want for a mask (for example, if you want to limit the viewable area of text in a scrollable window), and place what you want concealed in the layer underneath. Then, right click on the layer you want to be a mask, and select "Mask". You may add as many layers underneath the mask as you want, but you can not nest masks within the same timeline. That is, if you want to mask a mask, you must place the first mask in a movie, and then place that movie underneath a mask in a separate timeline.
Table of Contents
SWfX Help System Constructs
Loading Animation
	When I initially constructed this help file, I could assume that the entire .swf of the help system would load immediately since it runs locally with the SWfX application. However, when I put this tutorial version together, I wanted to give people the ability to view the system online. When constructing for online delivery of media and information, it is very important to take bandwidth into consideration. This not only means scaling back on graphics and cutting audio bitrates, but also carefully controlling the order in which objects load and when mechanisms can begin operating. Without these checks, your Flash movie will play one frame at a time, stalling until the next one is loaded - and a stalled movie is not only ugly and unprofessional, but can also, under certain circumstances, collapse your movie. If, for example, your movie is trying to give instructions to other objects which have not yet loaded, those instructions will be lost because Flash will not know to issue the instructions again once the objects have loaded. The loading mechanism here is quite simple, and the total animation is about 4K (this is identical to the standard Wildform loading animation with the WildOrb graphics replaced with a SWfXOrb graphic; another example of saving time through the reuse of movies) - your loading animation should be small because it needs to load very quickly even over slow connections. On the first frame of the main timeline, I run a quick check to see if the frame marked "on" is loaded (which might be the case if this movie were running locally, over a fast connection, or if the movie had already been cached by the browser). This "If Frame is Loaded" action is built right into Flash. This only works on main timelines of levels. If you want to determine how many frames have loaded of a movie that is not on the top level, you will need to use the GetProperty action, and the _framesloaded or _currentframe properties. I reference the target frame by a name instead of its frame number, making it easier to shift frames around without having to re-write all the action script - just make sure your labels are consistent and not duplicated anywhere. I named this frame "on" because at this frame, the movie is fully on and active. If the target frame isn't loaded, the movie begins playing the loading animation and enters a loop, in which every other frame the movie checks to see if the frame marked "on" is loaded. If it isn't, the movie plays the next frame, which contains a GoTo right back to the previous frame which runs the check again. The loading animation has to be its own movie clip, because it needs to be able to run on its own timeline. Eventually the movie will load (probably pretty quickly on a movie this small). Once it does, that if statement will tell the movie to jump to the frame labeled "turn_on", where the loading animation is turned off and the SWfX help interface begins to load.
Table of Contents
Wildform Brand Animation
	As soon as the loading animation disappears, and the movie starts playing, the Wildform brand animation appears. I will describe this animation briefly because I know that many help developers are attracted to this medium, at least in part, because of the superb graphics, sound and animation capabilities. The animation itself is quite simple. As a movie, it runs on its own timeline. The raster animation behind each letter is very small. Actually, it is one raster image of some red lines. I imported that image, and then inserted 6 identical keyframes. I distorted each frame uniquely using the resize, rotate and skew tools in Flash. Then I created eight movies, each of which had a mask layer covering this raster animation (to convert the rectangular animation to the shape of the text). Instead of using the Wildform letters to spell out Wildform, I used those 8 masked movies. There is a button on the bottom layer of the Wildform animation timeline. (In the output SWF, this button is invisible, but in the source .FLA it is a bright green - I hid the button using the "hit" frame of the button, instead of setting the button to 0% alpha, which slows down your movie). This button is a link to the Wildform website. Please note that this button only appears on the last frame - once each character has reached its final position - because I did not want a clickable area until the characters were all in the proper position. Using techniques like this, you can fine-tune your interface to appear and perform exactly as desired.
Table of Contents
Scroll Bars
	Another mechanism that I reuse repeatedly is the scroll bar. This feature is not built into Flash - you have to construct it with the programming techniques and graphical objects you create. There are three basic objects in this scroll bar mechanism: the content, a mask, and the scroll bar itself. In addition, there are two frames of action script in this movie. The mask is the area of the content you want visible. The content itself must be a movie clip named "list" - whether or not you choose to make this a static, single-frame movie, or a dynamic, interactive movie in itself is up to you. The scroll bar must be a movie named "scroll". Align everything for a good appearance. If you wish to use this code in your own movies, simply copy and paste. There is one additional step - you must specify the values of four variables in the first frame of the action layer in the scroll movie: TargetTop = the center-y-coordinate of the "list" movie when it is in its top position TargetBot = the center-y-coordinate of the "list" movie when it is in its bottom position BoxTop = the center-y-coordinate of the "box" movie when it is in its top position BoxBot = the center-y-coordinate of the "box" movie when it is in its bottom position The easiest way to do this is to select the "list" or "box" movie, and copy the y value from the object inspector in Flash. IMPORTANT: be certain that "use center point" is checked in the object inspector, otherwise you will copy incorrect values. You will also need to adjust the variable "steps". This is the number of scroll intervals from the top to the bottom - the longer the list, the more steps you will want. If you are using dynamically edited text fields (or if you are feeling adventurous), you will need to adapt this code so that it reads these values automatically. Simply alter the action script to derive the values for these variables dynamically, by getting the y origin and the height of the 'list' movie. You would also want to define the variable "steps" as the height of the list divided by some constant of your choice (depending on the amount of smoothness of scrolling you desire).
Table of Contents
Table of Contents
	The table of contents is a movie with several layers, and a couple of steps of animation, but it is basically quite simple. I constructed the animation based on the needs of the TOC. First, the list must appear from nothing. So, I started out at frame 1 with nothing, and then animated the entry for all elements in 4 frames, and placed a stop at frame 5. At this point nothing happens in the movie (except for the Wildform animation, which runs on its own timeline) unless the user mouses-over or clicks something. Notice that this animation is quite short. Animation can be used to make the user experience more seamless. However, be careful not to make your animation too long for certain items - for instance, the user must sit through this fade-in animation each time he wants to see the TOC. This animation is less than half a second in duration (4 frames at 12 frames/second). The user can either click a topic, which hides the menu and loads the topic, or the user can click "hide help topics" which just hides the menu list. In either instance, the menu then proceeds to animate to frame 10, at which point the menu is off, and the button that had read "hide help topics" now reads "view help topics" indicating the change in the button's function. If the user then selects "view help topics", the help topic movie then animates from frame 10 to frame 15, turning on, and then the movie jumps right back to frame 5 - where it had stopped when it first turned on - and awaits user input. Some people have noted the glowing gradient dots that appear as roll-over animation for the TOC topics. I created a separate dot movie for each topic (each word is a different length, and I wanted the dots to flank left and right, so I couldn't use the same dot movie for any two topics). That movie spends most of its time off. But, when you mouse over a topic, the invisible button behind the topic tells that topic's dot movie to turn on. If you click, or drag out, the dot animation stops. The glowing animation itself is a simple gradient gradient animation. Flash has built in tweening (animating) capabilites: shape and motion. This is a shape tween -- a shape (not a symbol), animated at different sizes, with different gradient fills, at three separate keyframes. If you want to change the appearance of a symbol over time, you would use a motion tween. I like tying animation to interactivity with buttons because a) it's relatively easy, with all the mouse actions built into Flash (except the scroll wheel) and b) users find it entertaining and useful. This is a very simple sample.
Table of Contents
Dialog Boxes
	Although there was no initial need for dialog boxes in the help system, I had already constructed them because they were necessary for the SWfX application interface. So, when it became clear that there was not enough room in the FAQ to incorporate new answers that we needed to add, I figured that instead of redesigning and reanimating the FAQ movie, I would place the new answers in a large dialog box. You can see this in the FAQ by clicking the fourth question "How do I use SWfX-generated SWFs with…" These dialog boxes are two-frame movies; the first frame is empty, and the second contains the dialog box. I did not animate a fade-in for these boxes for reasons of simplicity, as well as the fact that they can be quite text heavy, and text (as explained above) animates relatively slowly. The empty frame is labeled "off" and the frame with all the contents of the dialog box is labeled "on". When you want to activate the dialog box, simply tell that movie to go to "on" and stop. The only way to hide the dialog box is by clicking the "ok" button, which simply tells the dialog box movie to return to "off". Since you will want dialog boxes to appear on top of all content beneath it (including, perhaps, logos), be certain that you place that movie above everything. One word of caution regarding buttons: buttons do not lose their interactivity even when they are covered - unless they are covered by other buttons. Since you do not want users clicking on navigation that is supposed to be hidden and inactive when the dialog box is visible, you should include a full-screen, invisible button, with no actions, on the bottom layer of the "on" frame of your dialog box. This will supersede any buttons beneath the dialog box, and any buttons or navigation above it (for example, the "ok" button) will still function. Because of the button, the mouse cursor will appear as a hand over the entire screen, but the user will not be able to trigger unexpected reactions. In Flash 5, you can replace the default cursor with custom graphics, which relieves this problem.
Table of Contents
Topics
	The final aspect of this help system is the topics themselves. Each button on the help topic menu corresponds to a topic. When a user clicks a topic button, the help system closes whatever topic is currently displayed, and then proceeds to tell the new topic to go to a certain frame and begin animating. For the purposes of this tutorial, I have broken these topics into two categories: simple (welcome, save, using additional effects, support) and complex (FAQ, creating your movie). I will describe these in a bit more detail.
Table of Contents
Simple Topics
	Since these are so straight-forward, I will use Welcome as an example for all of the simple topics. The welcome movie itself consists of just five non-animated layers. The movie that activates it ("welcome alpha fade") is simply an alpha fade of the welcome movie. So, when a user clicks "welcome" on the help topics list, the welcome button instructs "welcome alpha fade" to go to "turn_on" (where "welcome movie" is at 0% alpha) and play, which it does until the frame marked "on", where there is a stop action.
Table of Contents
Complex Topics
	Since these topics are much more complicated than the simple topics, I will attempt to explain both complex topics. The same fade-in mechanism is in place for both of these complex topics as for the Welcome topic, described above. I will skip to the point where these topics are "on" and at 100% alpha. I call these topics "complex" not because any specific thing I do is advanced or difficult, but rather because these topics involve a combination of different simple mechanisms, which create the complexity. FAQ The FAQ movie is, in many ways, like the Welcome movie - a simple, one-frame movie with only a few layers. However, two of the layers in this movie are also movies with independent timelines: the questions (left pane) and the answers (right pane). Let us start with the answers movie, the simpler of the two. The "answers movie" is actually a single-frame movie that contains two layers - a background, and the movie with the actual answers. If you edit that "faq answer frames movie", you will see a 13-frame movie, with 12 answers. Each frame after the first is labeled "1", "2", respectively. The only action on every frame is "stop". If the space were sufficient to list all the questions without a scroll bar, the questions movie would be even simpler than it is - just a list of questions and buttons which tell the answer movie which frame to display. As it is, however, the limitations of this interface do require a scrolling mechanism. This is described above, under its own topic, so I won't repeat an explanation here. The "questions movie" contains a scrolling apparatus and a separate movie with the list of questions and buttons. Edit that movie, "faq q copy", and you will see the entire list of questions. If you double-click any button, you will see how these buttons control the answer movie. Of note in this questions movie is question #4, "How do I use SWfX-generated SWFs with Macromedia Flash (LoadMovie vs. Import)?". Click this question and you will see that a full-screen dialog box appears. For more information on dialog boxes, see above for the topic. I put the dialog boxes on the top layer for ease-of-editing, and to make certain that they would cover all graphical elements, such as the Wildform and SWfX logos. Creating Your Movie The main create movie, "creating your movie 2", like the main FAQ movie, is a simple, single-frame movie. In this frame, you will see the "creating your movie" movie. In here are the important elements - the left navigation, the subtopics, and the tooltips. The subtopic movie, "creating movie subtopic movie", is very similar to the FAQ answer movie. There are 6 frames, the first of which, the default, is empty. The remaining five contain the five subtopics represented in the navigation. Each subtopic is a simple, single- or double-frame movie (non-scrolling and scrolling, respectively). In these each of these subtopics, I have placed graphic screenshots of the SWfX interface. (Incidentally, since the SWfX GUI is all Flash, I was able to grab these elements as a vector graphic, rather than a raster screenshot, which reduces filesize and allows for resizing without degrading image quality. On top of these screenshots are invisible buttons - one for each portion of the screenshot I felt should be described in better detail. Each invisible button contacts the tooltips movie, telling it which tooltip to display. (Please note that I also added the text "mouse over image of window for descriptions" to each window; never assume that your users will understand your features unless you spell them out.) I have placed each individual tooltip so that it does not cover any essential content when it is visible. Each invisible button also has instructions to reset the tooltip movie to its default empty state on roll-out or press, which means that if the user moves the mouse away from the area in question, or clicks the interface (as instructed to in the tooltip), the tooltip disappears. Each frame of the tooltips movie contains a tooltip, a label and a stop action. I have added an additional comment layer to easily discern where the tooltips for one topic end and those for another begin. The navigation system for the "Creating…" topic has different functionality than the main TOC navigation system - once a button is hit, it is disabled. Once another button is hit, the disabled button is reactivated, and the new button is deactivated. I built this by placing each button in its own movie. In this navigation movie, "creating your movie menu movie", there are five separate, two-frame movies. The first frame of each movie contains an active button, white text, the label "on", and the action "stop". The second frame of each movie contains no button, red-tinted text, the label "off", and the action "stop". When the user clicks one of these buttons, it instructs all the other buttons to go to "on" and stop, and then it instructs the "creating movie subtopic movie" to display the proper topic. Finally, it instructs the movie in which it is contained, to go to "off" and stop, thus deactivating itself.
Table of Contents
<- back to tutorials
©2000 Wildform, Inc.